import React, {Component} from 'react';
import {FlatList, StyleSheet} from 'react-native';
import {Dialog, Text, TouchableOpacity, View} from 'react-native-ui-lib';
import {commonStyles} from '../../configs/commonStyle';
import {Icon} from '../components';
import ListEmpty from './ListEmpty';
import {inject, observer} from 'mobx-react';
import { reasonData } from "../../configs/config";



/**
 * 申诉原因
 */
@inject('userStore')
@observer
export default class ReasonListDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showEmpty: false,
            isOpen: false,
            selectIndex: 0,
        };
    }

    show = (selectIndex) => {
        this.setState({isOpen: true, selectIndex});
    };

    dismiss = () => {
        this.setState({isOpen: false});
    };

    renderPannableHeader = props => {
        return (
            <View>
                <View margin-10 row centerV spread>
                    <View flex centerV>
                        <Text style={{...commonStyles.text_black_17}}>选择原因</Text>
                    </View>
                    <TouchableOpacity onPress={this.dismiss}>
                        <Icon type="AntDesign" name={'close'} size={16} color={'#282828'}/>
                    </TouchableOpacity>
                </View>
                <View height={1} bg-line/>
            </View>
        );
    };

    render_item = ({item, index}) => {
        const {selectIndex} = this.state;
        return (
            <TouchableOpacity style={{...styles.item, backgroundColor: index % 2 > 0 ? '#F4F6F9' : '#ffffff'}}
                              onPress={() => {
                                  if (selectIndex != index) {
                                      this.props.callBack(index);
                                      this.dismiss();
                                  }
                              }}
            >
                <View margin-5 flex>
                <Text style={{...commonStyles.text_black222_14}}>{item}</Text>
                </View>
                {
                    selectIndex == index ?
                        <Icon type="AntDesign" name={'check'} size={16} color={'#282828'}/> :
                        null
                }
            </TouchableOpacity>
        );
    };

    render() {
        const {isOpen} = this.state;
        return (
            <Dialog
                migrate
                width={'100%'}
                height={'60%'}
                bottom
                containerStyle={styles.roundedDialog}
                visible={isOpen}
                onDismiss={this.dismiss}
                renderPannableHeader={this.renderPannableHeader}
            >
                <View flex paddingH-15>
                    <FlatList
                        data={reasonData}
                        showsVerticalScrollIndicator={false}
                        keyboardShouldPersistTaps='always'
                        extraData={this.state}
                        ListEmptyComponent={() => <ListEmpty showEmpty={this.state.showEmpty}/>}
                        style={{flex: 1}}
                        contentContainerStyle={{flexGrow: 1}}
                        keyExtractor={(item, index) => 'menu_' + index}
                        renderItem={this.render_item}
                    />
                </View>
            </Dialog>
        );
    }
}

const styles = StyleSheet.create({
    roundedDialog: {
        backgroundColor: 'white',
    },
    item: {
        padding: 10,
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
});


